<script setup lang="ts">
 import  Menu from './Menu.vue';
 import Header from './Header.vue';
</script>
      
<template>
    <!-- 布局 -->
    <div class="common-layout">
    <el-container>  
      <!-- 顶栏容器 -->
      <el-header>
        <Header></Header>
      </el-header>
      <el-container>
        <!-- 侧边栏容器 -->
        <el-aside width="200px"><Menu></Menu></el-aside>
          <!-- 主要区域容器 -->
          <router-view/>
        <el-main></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
 .common-layout {
   height: 100vh;
 }
 .el-container {
   height: 100%;
   direction: vertical;
 }
 .el-header {
   display: block;
   background-color: #00afd6;
   color: #ffffff;
 }
 .el-aside {
   display: block;
   background-color: #002fd0;
   color: #ffffff;
   width: 200px;
 }
</style>